<template>
  <view class="search-content">
    <!-- 搜索条件 -->
    <uni-card title="选择搜索字段并输入值：">
      <view class="grid-container">
        <view v-for="(field, index) in fields" :key="index" class="grid-item">
          <text class="field-title">{{ field }}</text>
          <uni-easyinput
            type="text"
            v-model="searchValues[field]"
            :placeholder="'请输入' + field"
            class="search-input"
          />
        </view>
      </view>
      <uni-button type="primary" @click="executeSearch" class="search-button">搜索</uni-button>
    </uni-card>

    <!-- 搜索结果展示 -->
    <view v-if="dbContent.length > 0" class="results">
      <view v-for="(row, index) in dbContent" :key="index" class="result-card">
        <!-- 重点字段 -->
        <view class="important-fields">
          <view v-if="row['汉']" class="field-item">
            <text class="field-title">汉：</text>
            <text>{{ row['汉'] }}</text>
          </view>
          <view v-if="row['满']" class="field-item">
            <text class="field-title">满：</text>
            <text>{{ row['满'] }}</text>
          </view>
          <view v-if="row['藏']" class="field-item">
            <text class="field-title">藏：</text>
            <text>{{ row['藏'] }}</text>
          </view>
          <view v-if="row['蒙']" class="field-item">
            <text class="field-title">蒙：</text>
            <text>{{ row['蒙'] }}</text>
          </view>
          <view v-if="row['维']" class="field-item">
            <text class="field-title">维：</text>
            <text>{{ row['维'] }}</text>
          </view>
        </view>

        <!-- 非重点字段 -->
        <view class="other-fields">
          <view v-for="(value, key) in row" :key="key" v-if="!['汉', '满', '藏', '蒙', '维'].includes(key)" class="field-item">
            <text class="field-title">{{ key }}：</text>
            <text>{{ value }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <uni-card v-else-if="searchExecuted">
      <uni-empty description="未找到任何匹配的数据"></uni-empty>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dbName: 'uploadedDB',
      fields: [
        '序号',
        '卷པོད།',
        'སྡེ།',
        '部',
        'སྐོར།',
        '类',
        '满',
        '藏',
        '拉丁撰写',
        '蒙古文拉丁',
        '蒙',
        '维',
        '汉',
        '简体字',
        '日'
      ],
      searchValues: {}, // 用于存储每个字段的输入值
      dbContent: [],
      currentPage: 1,
      itemsPerPage: 10,
      searchExecuted: false
    };
  },
  methods: {
    executeSearch() {
      const hasValue = Object.keys(this.searchValues).some(field => {
        const value = this.searchValues[field] || '';
        return value.trim() !== '';
      });

      if (!hasValue) {
        uni.showToast({ title: '请至少输入一个搜索值', icon: 'none' });
        return;
      }

      this.currentPage = 1;
      this.loadTableContent();
    },

    loadTableContent() {
      const conditions = Object.keys(this.searchValues)
        .filter(field => this.searchValues[field]?.trim() !== '')
        .map(field => {
          const value = this.searchValues[field] || '';
          return `\`${field}\` LIKE '%${value.replace(/'/g, "''")}%'`;
        })
        .join(' AND ');

      const sql = `SELECT * FROM 五体 
                  ${conditions ? 'WHERE ' + conditions : ''} 
                  LIMIT ${this.itemsPerPage} 
                  OFFSET ${(this.currentPage - 1) * this.itemsPerPage}`;

      console.log('Generated SQL Query:', sql);

      plus.sqlite.selectSql({
        name: this.dbName,
        sql,
        success: (res) => {
          this.searchExecuted = true;
          this.dbContent = res;
        },
        fail: (err) => {
          console.error('查询失败:', err);
          uni.showToast({ title: '查询失败，请检查搜索条件', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 搜索条件布局 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  justify-content: space-between;
}

.grid-item {
  width: 25%; /* 每行三列 */
  border: 1px solid #ccc;
  padding: 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.field-title {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  display: block;
}

.search-input {
  margin-top: 10rpx;
  width: 100%;
}

.search-button {
  margin-top: 20rpx;
}

/* 搜索结果卡片布局 */
.results {
  margin-top: 20rpx;
}

.result-card {
  border: 1px solid #ccc;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.important-fields {
  margin-bottom: 20rpx;
}

.field-item {
  margin-bottom: 10rpx;
}

.field-title {
  font-weight: bold;
  display: inline-block;
  margin-right: 10rpx;
}
</style>